const path = require("path");
//引入插件
const HtmlWebpackPlugin = require
    ("html-webpack-plugin");
//引入抽离css插件
const MiniCssExtractPlugin = require
    ("mini-css-extract-plugin");
//引入压缩css插件
const CssMinimizerPlugin = require
    ('css-minimizer-webpack-plugin');
//引入压缩js插件
const ParallelUgifyPlugin = require
    ('webpack-parallel-uglify-plugin');
module.exports = {
    //入口
    entry: "./js/cart.js",
    //出口
    output: {
        //打包前清除dist
        clean: true,
        //打包之后的配置文件名
        filename: "js/cart.[contenthash:8].js",
        /*打包后的输出路径
        //__dirname表示获取webpack.config.js所在路径
        第二个参数表示根据这个路径去找到dist路径*/
        path: path.resolve(__dirname, "./dist"),
    },
    //模式mode用来指定结构模式，可选值有development(开发模式) 和 production(生产模式)
    //插件配置
    plugins: [
        new HtmlWebpackPlugin({//实例化html-webpack-plugin插件
            template: "./src/cart.html",//以旧的html为模板
            filename: "index.html",//打包后的文件名 默认是index.html不写也可以
            inject: "body",//设置所有资源文件注入模板的位置 默认是head
        }),
        new MiniCssExtractPlugin({ //实例化抽离css插件
            //打包后的文件名
            filename: "style/cart.[contenthash:8].css"
        }),
        new ParallelUgifyPlugin({//实例化 并行压缩输出js插件
            uglifyJS:{
                compress:{
                    drop_console:true,//是否删除代码中所有的console.log语句
                    collapse_vars:true,//去掉中间变量
                    reduce_vars:false,//一般都写false
                },
                output:{//输出配置
                    beautify:false,//是否输出可读性较强的代码 一般写false
                    comments:false,//是否保留代码注释
                },
            }
        })
    ],
    //优化配置
    optimization: {
        minimizer: [new CssMinimizerPlugin()],
    },
    module: {
        rules: [{
            test: /\.(c|[ac])ss$/i,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader"],
        }]
    }
}